import React, { Component } from 'react'
import { Modal, Button, Input, Form, Select, message } from 'antd'
import { addCategory, findCategroy } from '../../api/category'
const { Option } = Select
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
}

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
}

export default class AddCat extends Component {
  state = {
    isModalVisible: false,
    status: 0,
    subsCategory: [],
  }
  showModal = () => {
    this.setState({
      isModalVisible: true,
    })
  }

  handleCancel = () => {
    this.setState({
      isModalVisible: false,
    })
  }

  // 表单提交
  onFinish = (v) => {
    if (!v.parentId) v.parentId = 0
    addCategory(v).then((res) => {
      message.success(res.data.msg)
      // console.log(res)
    })
    // console.log(v)
  }
  // 选项更改触发
  onTypeChange = (v) => {
    if (v === '二级分类') {
      findCategroy({ parentId: 0 }).then((res) => {
        this.setState({ status: 1, subsCategory: res.data.data.data })
      })
    } else {
      this.setState({
        status: 0,
      })
    }
    // console.log(v)
  }

  render() {
    let { isModalVisible } = this.state
    return (
      <>
        <Button type="primary" onClick={this.showModal}>
          添加分类
        </Button>
        <Modal
          title="添加分类"
          visible={isModalVisible}
          onCancel={this.handleCancel}
          footer={null}
        >
          <Form {...layout} name="control-hooks" onFinish={this.onFinish}>
            <Form.Item
              name="name"
              label="分类名字"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="type"
              label="分类级别"
              rules={[{ required: true }]}
            >
              <Select
                placeholder="请选择分类级别"
                onChange={this.onTypeChange}
                allowClear
              >
                <Option value="一级分类">一级分类</Option>
                <Option value="二级分类">二级分类</Option>
              </Select>
            </Form.Item>
            {this.state.status ? (
              <Form.Item
                name="parentId"
                label="父分类"
                rules={[{ required: true }]}
              >
                <Select
                  placeholder="Select a option and change input text above"
                  // onChange={this.onParentTypeChange}
                  allowClear
                >
                  {this.state.subsCategory.map((item) => {
                    return (
                      <Option key={item._id} value={item._id}>
                        {item.name}
                      </Option>
                    )
                  })}
                </Select>
              </Form.Item>
            ) : null}

            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                添加
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </>
    )
  }
}
